<!doctype html>

<html>
  <head>
    {% from 'macros.html' import checkbox, slider, card_header, collapse_handler %}
    
    <meta charset="utf-8">
    <title>{{ title }}</title>
        
    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
    
    <link rel="stylesheet" href="/static/bootstrap.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    
    <script type='text/javascript' src='https://webrtc.github.io/adapter/adapter-latest.js'></script>
    <script type='text/javascript' src='/static/webrtc.js'></script>
    <script type='text/javascript' src='/static/rest.js'></script>
    <script type='text/javascript' src='/static/debounce.js'></script>
    <script type='text/javascript' src="/static/jquery-3.6.3.min.js"></script>
    <script type='text/javascript' src='/static/bootstrap.bundle.min.js'></script>
    <script type='text/javascript'>
      play = function() {
        playStream(document.getElementById('play-stream').value, document.getElementById('video-player'));
      };
      
      send = function() {
        if( sendStream(getWebsocketURL('input'), document.getElementById('send-stream').value) )
          play(); // autoplay browser stream
      }
      
      window.onload = function() {
        var playStream = document.getElementById('play-stream');
        var sendStream = document.getElementById('send-stream');
        var sendButton = document.getElementById('send-button');

        playStream.value = getWebsocketURL('output');
    
      {% if send_webrtc %}
        // populate the list of browser video devices (requires HTTPS)
        if( checkMediaDevices() ) {
          navigator.mediaDevices.getUserMedia({audio: false, video: true}).then((stream) => { // get permission from user
            navigator.mediaDevices.enumerateDevices().then((devices) => {
              stream.getTracks().forEach(track => track.stop()); // close the device opened to get permissions
              devices.forEach((device) => {
                if( device.kind == 'videoinput' ) {
                  console.log(`Browser media device:  ${device.kind}  label=${device.label}  id=${device.deviceId}`);
                  sendStream.add(new Option(device.label, device.deviceId));
                }
              });
              if( sendStream.options.length == 0 ) {
                sendStream.add(new Option('browser has no webcams available'));
                sendButton.disabled = true;
              }
            });
          }).catch(reportError);
        }
        else
        {
          sendStream.add(new Option('use HTTPS to enable browser webcam'));
          sendButton.disabled = true;
        }
      {% else %}
        // auto-play other sources, since they're already running
        play();
      {% endif %}
      }
    </script>
  </head>
  <body>
    <!-- Navigation -->
    <nav class="navbar navbar-expand-lg bg-primary">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">{{ title }}</a>
      <!--
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbar-menu-items">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
            <li class="nav-item">
              <a class="nav-link active" href="https://github.com/dusty-nv/jetson-inference" target="_blank">Help</a>
            </li>
          </ul>
        </div>
      -->
      </div>
    </nav>
    
    <!-- Video Player -->
    <div style="position: sticky; top: 0px; z-index: 999;">
      <video id="video-player" autoplay controls playsinline muted>Your browser does not support video</video>
    </div>
    
    <!-- Stream Controls -->
    <div class="card" style="width: 36rem;">
      <div class="card-body">
        {{ card_header('stream_controls', 'Streaming', arrow='down') }}
        <div class="collapse show" id="stream_controls">
        {% if send_webrtc %}
          <div class="row">
            <label for="send-stream" class="col-2">Webcam:</label>
            <div class="col-6">
              <select id="send-stream" name="send-stream"></select>
            </div>
            <div class="col-4">
              <button id="send-button" onclick="send()">Send</button>
            </div>
          </div>
        {% else %}
          <div class="row">
            <label for="input-stream" class="col-2">Input:</label>
            <div id="input-stream" class="col-10">
              {{ input_stream }}
            </div>
          </div>
        {% endif %}
          <div class="row">
            <label for="play-stream" class="col-2">Playback:</label>
            <div class="col-6">
              <input id="play-stream" name="play-stream" type="text" size="32">
            </div>
            <div class="col-4">
              <button id="play-button" onclick="play()">Play</button>
            </div>
          </div>
          <div class="row">
            <label for="connection-stats-show" class="col-2">Statistics:</label>
            <div class="col-2">
              <input id="connection-stats-show" type="checkbox" class="form-checkbox" oninput="onConnectionStats()">
            </div>
            <script type='text/javascript'>
              function onConnectionStats() {
                var show = document.getElementById('connection-stats-show').checked;
                document.getElementById('connection-stats').style.display = show ? null : 'none';
              }
            </script>
          </div>
          <div class="row" id="connection-stats" style="display: none">
            <pre class="col-6" id='connection-stats-play'></pre>
            <pre class="col-6" id='connection-stats-send'></pre>
          </div>
        </div>
        {{ collapse_handler('stream_controls') }}
      </div>
    </div>
    
  <!-- Classification Controls -->
  {% if classification|length %}
    <div class="card" style="width: 36rem;">
      <div class="card-body">
        {{ card_header('classification_controls', 'Classification', classification) }}
        <div class="collapse" id="classification_controls">
          {{ checkbox('classification_enabled', '/classification/enabled', 'Classification Enabled') }}
          {{ slider('classification_confidence_threshold', '/classification/confidence_threshold', 'Confidence Threshold') }}
          {{ slider('classification_output_smoothing', '/classification/output_smoothing', 'Output Smoothing') }}
        </div>
        {{ collapse_handler('classification_controls') }}
      </div>
    </div>
  {% endif %}
  
  <!-- Detection Controls -->
  {% if detection|length %}
    <div class="card" style="width: 36rem;">
      <div class="card-body">
        {{ card_header('detection_controls', 'Object Detection', detection) }}
        <div class="collapse" id="detection_controls">
          {{ checkbox('detection_enabled', '/detection/enabled', 'Detection Enabled') }}
          {{ slider('detection_confidence_threshold', '/detection/confidence_threshold', 'Confidence Threshold') }}
          {{ slider('detection_clustering_threshold', '/detection/clustering_threshold', 'Clustering Threshold') }}
          {{ slider('detection_overlay_alpha', '/detection/overlay_alpha', 'Overlay Alpha', min=0, max=255, step=1) }}
          
          <script type='text/javascript'>
            function onDetectionTrackingEnabled() {
              var value = document.getElementById('detection_tracking_enabled').checked;
              document.getElementById('detection_tracking_controls').style.display = value ? null : 'none';
              console.log(`onTrackingEnabled(${value})`);
            }
          </script>
          
          {{ checkbox('detection_tracking_enabled', '/detection/tracking_enabled', 'Tracking Enabled', oninput='onDetectionTrackingEnabled()') }}

          <div id="detection_tracking_controls">
            {{ slider('detection_tracking_min_frames', '/detection/tracking_min_frames', 'Tracking Min Frames', min=0, max=60, step=1) }}
            {{ slider('detection_tracking_drop_frames', '/detection/tracking_drop_frames', 'Tracking Drop Frames', min=0, max=60, step=1) }}
            {{ slider('detection_tracking_overlap_threshold', '/detection/tracking_overlap_threshold', 'Overlap Threshold') }}
          </div>
          <script type='text/javascript'>
            onDetectionTrackingEnabled();  // set default visibility of tracking controls
          </script>
        </div>
        {{ collapse_handler('detection_controls') }}
      </div>
    </div>
  {% endif %}
  
  <!-- Segmentation Controls -->
  {% if segmentation|length %}
    <div class="card" style="width: 36rem;">
      <div class="card-body">
        {{ card_header('segmentation_controls', 'Segmentation', segmentation) }}
        <div class="collapse" id="segmentation_controls">
          {{ checkbox('segmentation_enabled', '/segmentation/enabled', 'Segmentation Enabled') }}
          {{ slider('segmentation_overlay_alpha', '/segmentation/overlay_alpha', 'Overlay Alpha', min=0, max=255, step=1) }}
        </div>
        {{ collapse_handler('segmentation_controls') }}
      </div>
    </div>
  {% endif %}
  
  <!-- Pose Controls -->
  {% if pose|length %}
    <div class="card" style="width: 36rem;">
      <div class="card-body">
        {{ card_header('pose_controls', 'Pose Estimation', pose) }}
        <div class="collapse" id="pose_controls">
          {{ checkbox('pose_enabled', '/pose/enabled', 'Pose Enabled') }}
          {{ slider('pose_confidence_threshold', '/pose/confidence_threshold', 'Confidence Threshold') }}
        </div>
        {{ collapse_handler('pose_controls') }}
      </div>
    </div>
  {% endif %}
  
  <!-- Action Controls -->
  {% if action|length %}
    <div class="card" style="width: 36rem;">
      <div class="card-body">
        {{ card_header('action_controls', 'Action Recognition', action) }}
        <div class="collapse" id="action_controls">
          {{ checkbox('action_enabled', '/action/enabled', 'Actions Enabled') }}
          {{ slider('action_confidence_threshold', '/action/confidence_threshold', 'Confidence Threshold') }}
          {{ slider('action_skip_frames', '/action/skip_frames', 'Skip Frames', min=0, max=30, step=1) }}
        </div>
        {{ collapse_handler('action_controls') }}
      </div>
    </div>
  {% endif %}
  
  <!-- Background Controls -->
  {% if background|length %}
    <div class="card" style="width: 36rem;">
      <div class="card-body">
        {{ card_header('background_controls', 'Background Removal', background) }}
        <div class="collapse" id="background_controls">
          {{ checkbox('background_enabled', '/background/enabled', 'Removal Enabled') }}
        </div>
        {{ collapse_handler('background_controls') }}
      </div>
    </div>
  {% endif %}
  
  </body>
</html>